<template>
  <div class="food_list" v-if="index === 0">
    <van-tree-select v-model:main-active-index="activeIndex" height="88vw" :items="items" @click-nav="navClick">
      <template #content>
        <div v-for="(i,index) in subItem" :key="index" class="item_bg">
          <FoodAdd :item="i" :showAdd="true" :addClick="addClick" :onChange="onChange"></FoodAdd>
        </div>
      </template>
    </van-tree-select>
  </div>
  <div v-else>{{foodData.content}}</div>
</template>

<script>
import {reactive,toRefs} from 'vue'
import FoodAdd from '../../../components/FoodAdd.vue'
export default {
    props: ["index", "foodData"],
    setup(props) {
        console.log(props.foodData);
        let data = reactive({
            activeIndex: 0,
            items: [],
            subItem:[],
        });
        // 数组的初始化
        const init = () => {
            let newList = [];
            //添加问号表示对评价栏、商家栏没有foodData表示兼容
            props.foodData?.items?.map((i,index) => {
                // console.log(i.text);
                newList.push({
                    text: i.text
                });
                if(data.activeIndex===index){
                  data.subItem=i.children
                }
            });
            data.items = newList;
        };
        init();
        //点击左侧导航栏
        const navClick = (i) => {
            // console.log(i);
            data.activeIndex = i;
            init();
        };
        // 声明步进器
        const addClick=(i) => {
          data.subItem.forEach((item) => {
            if(item.id===i){
              item.add=false;
              item.num+=1;
            }
          })
        }
        // 步进器增加触发事件
        const onChange=(value,details) => {
          data.subItem.forEach((item) => {
            if(item.name=details.name){
              item.num=value
            }
          })
          // console.log(data.subItem,'subItem...');
        }
        return {
            ...toRefs(data),
            navClick,
            addClick,
            onChange,
        };
    },
    components: { FoodAdd }
}
</script>

<style lang="less" scoped>
.food_list{
  margin-top: 20px;
  .item_bg{
    padding: 10px;
  }
}

/deep/ .van-tree-select_item--active{
  color:#ffc400;
}
/deep/ .van-sidebar-item--select::before{
  background-color: #ffc400;
}
</style>